<template>
  <!-- 弹框-->
  <a-modal
    :title="title"
    :visible="visible"
    @cancel="clickCancel()"
    @ok="clickConfirm()"
    width="50%"
    :confirmLoading="submitting"
  >
    <a-form-model
      ref="ruleForm"
      :rules="rules"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      labelAlign="left"
    >
      <a-form-model-item label="文件名称" prop="cName">
        <a-input v-model="form.cName" placeholder="请输入文件名称" />
      </a-form-model-item>
    </a-form-model>
    <a-upload
      name="file"
      :multiple="false"
      action="/api/common/upload"
      :file-list="fileList"
      :headers="headers"
      @change="handleChange"
      accept="application/pdf"
    >
      <a-button v-if="fileList.length < 1"> <a-icon type="upload" /> 增加 </a-button>
    </a-upload>
  </a-modal>
</template>
<script>
import monitor from '@/utils/monitor'
import uploadContract from '@/monitor/views/overview/detail/responsible/components/contract/uploadContract'
const watch = monitor(uploadContract)
export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      confirmLoading: false,
      title: '合同上传', // 动态标题
      headers: {
        authorization: 'authorization-text'
      },
      rules: {
        // 校验规则
        cName: [{ required: true, message: '请填写文件名称' }]
      },
      form: {
        cName: null
      },
      fileList: [],
      cUrl: '',
      submitting: false
    }
  },
  mounted () {},
  watch: {},
  methods: watch({
    handleChange (info) {
      console.log(info)
      this.fileList = info.fileList
      this.cUrl = info.fileList[0].response.data
      this.form.cName = info.fileList[0].name
    },
    clickCancel () {
      this.form = {
        cName: null
      }
      this.fileList = []
      this.$emit('uploadModalCancel')
    },
    clickConfirm () {
      this.$refs.ruleForm.validate(valid => {
        if (valid && this.cUrl) {
          this.uploadContract()
          const value = {
            cUrl: this.cUrl,
            cName: this.form.cName
          }
          console.log(value)
          this.$emit('uploadClickConfirm', value)
          this.form = {
            cName: null
          }
          this.fileList = []
        } else {
          this.$message.error('请补充完整信息')
        }
      })
    },
    // 重置对话框
    resetForm () {
      this.$refs.ruleForm.resetFields()
      this.cUrl = ''
      this.form = { cName: null }
    },
    // 上传合同模板埋点
    uploadContract () {}
  })
}
</script>
